<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zignal - simple signal</title>
  <link rel="stylesheet" href="https://ax.minicg.com/pico.min.css">
</head>
<body style="padding:40px;">
  <div style="width:320px;display:flex;flex-direction:column;gap:0px;margin:0 auto;">
    <label>count</label>
    <input type="number">
    <label>doubleCount</label>
    <textarea style="resize:none;" disabled></textarea>
    <button class="btn1">Unsubscribe Count</button>
    <button class="btn2">Unsubscribe Double</button>
    <button class="btn3" style="margin-top:10px;">Dispose Double</button>
  </div>
  <script type="module">
    import { zignal, computed } from './zignal.js';

    const $ = (selector) => document.querySelector(selector);
    const [input, textarea, btn1, btn2, btn3] = [$('input'), $('textarea'), $('.btn1'), $('.btn2'), $('.btn3')];

    // 创建普通信号
    // Create a regular signal
    const count = zignal(0);

    // 创建计算信号
    // Create a computed signal
    const doubleCount = computed(() => count.get() * 2, [count]);

    // 订阅普通信号
    // Subscribe to the regular signal
    const unsubscribeCount = count.subscribe((newValue) => {
      input.value = newValue;
    });

    // 订阅计算信号
    // Subscribe to the computed signal
    const unsubscribeDouble = doubleCount.subscribe((newValue) => {
      textarea.value = newValue;
    });

    // 更新普通信号
    // Update the regular signal
    setInterval(()=>{
      count.set(count.value + 1);
    }, 500);

    // 手动修改信号值
    // Manually modify the signal value
    input.onkeyup = () => count.set(input.value);

    // 取消订阅
    // Unsubscribe
    btn1.onclick = unsubscribeCount;
    btn2.onclick = unsubscribeDouble;

    // 销毁计算信号
    // Dispose of the computed signal
    btn3.onclick = () => doubleCount.dispose();
  </script>
</body>
</html>